<template>
  <div id="dictTableBottom"> 
    <div class="div">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="pageSizeArr"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { findListByPageDict } from '@/assets/request/api'
export default {
  name: "dictTableBottom",
  props: ['selectParams'],
  data() {
    return {
      page: {
        page: 1,
        size: 10
      },
      params: {
        dictName: '',
        dictCode: '',
        parentId: 0,
        type: 1
      },
      pageSizeArr: [1, 10, 20, 50, 100],
      total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.page.size = val
      this.page.page = 1
      this.getData()
    },
    handleCurrentChange(val) {
      this.page.page = val
      this.getData()
    },
    async getData() {
      this.$emit('changeLoad',true)
      if(!this.$store.state.cache.queryDict) {
        this.$store.commit('cache/setQueryDict',true)
        return 
      }
      // 1. 取得当前页数的数据
      await findListByPageDict(this.page, this.params).then(res => {
        this.total = res.data.total
        this.$emit('tableDictDataFun',res.data.records)
      }).catch(err => {
        this.$message({
          message: err.message,
          type: 'error'
        });
      })
    }
  },
  mounted() {
    this.getData()
  },
  watch: {
    selectParams: {
      handler(newValue) {
        this.page = {
          page: 1,
          size: 10
        }
        this.params = newValue
        this.getData()
      },
    }
  }
}
</script>

<style lang="scss" scoped>

.div {

  
  display:flex;
  align-items:center;
  justify-content:center;
  height: 5vh;

}
</style>